<template>
  <div class="page-container">
    <div class="content" v-show="pageModule.isSuccess">
      <img class="cheese-icon" src="@/assets/images/app/reward-03.png"/>
      <div class="reward-container">
        <button style="height: 20Px;width: 20Px;" @click="Router?.push({ name: 'largeScreen' })"></button>
        <img class="top-icon" src="@/assets/images/app/reward-02.png"/>
        <div class="content">
          <div class="reward-top">
            <span>挑战奖励</span>
            <div>
              <img src="@/assets/images/app/reward-02.png">
              <span>蜂蜜蜜罐桌</span>
            </div>
          </div>
          <div class="reward-list">
            <p>获得<span>A等级</span>可额外挑选家具一个</p>
            <div class="list">
              <template v-for="item in 10">
                <div class="item">
                  <div>
                    <img src="@/assets/images/app/reward-02.png"/>
                  </div>
                  <span>30张全sdasdadasdadadsad1</span>
                </div>
              </template>
            </div>
          </div>
        </div>
        <img class="bottom-icon" src="@/assets/images/app/reward-01.png"/>
      </div>
    </div>
    <button class="submit-button" v-show="pageModule.isSuccess">去挑战</button>
  </div>
</template>

<script setup lang="ts">
  import { BaseReloading } from "@/components/Warm/Popup";
  import { onUnmounted, reactive } from 'vue';
  import { getApp } from "@/common/hooks";

  const pageModule = reactive({
    isSuccess: true,
  });

  const { Router } = getApp(['Router']);

  onUnmounted(() => {
    destroy();
  });

  const destroy = BaseReloading({
    onSuccess(e) {
      console.log(e);
      pageModule.isSuccess = true;
    },
    hint: '数据加载失败, 请点击重新加载',
    promise: false,
    requestMethod: () => 2
  });
</script>

<style scoped lang="scss">
  @mixin fontStyle($size) {
    font-size: #{ $size }px;
    font-family: xiaolai;
    color: red;
  }

  .page-container {
    height: 100vh;
    height: -webkit-fill-available;
    width: 100%;

    > .content {
      position: absolute;
      width: 375px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 50px 14px;
      box-sizing: border-box;
    }

    .reward-container {
      position: relative;
      border: 2px solid #AEA3EF;
      border-radius: 15px;
      background-color: #FFFFFF;
      height: 100%;

      .top-icon {
        position: absolute;
        height: 38px;
        width: 220px;
        left: 50%;
        top: -16px;
        transform: translateX(-50%);
      }

      .bottom-icon {
        position: absolute;
        height: 54px;
        width: 272px;
        right: -10px;
        bottom: -18px;
      }

      > .content {
        padding: 40px 16px 100px 16px;
        height: 100%;
        box-sizing: border-box;
        overflow-y: scroll;
      }

      .reward-top {
        @include fontStyle(17);
        width: 145px;
        height: 122px;
        margin: 0 auto;
        border: 1px solid #FFEAC4;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-bottom: 27px;
        box-sizing: border-box;

        > span {
          font-size: 14px;
          text-align: center;
          background-color: #FFEAC4;
          padding: 7px 0;
        }

        div {
          background-color: #FFFAEF;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          img {
            vertical-align: middle;
            height: 58px;
            width: 58px;
          }

          > span {
            font-size: 11px;
          }
        }
      }

      .reward-list {
        @include fontStyle(17);
        border-top: 10px dashed #DCC1B7;
        padding-top: 20px;

        p {
          font-size: 15px;
          span {
            background: url("@/assets/images/app/reward-title-bg.png") no-repeat;
            background-size: cover;
            padding: 2px 6px;
          }
        }

        .list {
          padding-top: 12px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          //grid-gap: 2.2rem 1rem;

          .item {

            div {
              height: 72px;
              width: 72px;
              background-color: #FFFAEF;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 8px;
            }

            img {
              height: 68px;
              width: 68px;
              vertical-align: middle;
            }

            span {
              display: block;
              word-break: break-all;
              padding-top: 12px;
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
    }

    .cheese-icon {
      position: absolute;
      height: 60px;
      width: 60px;
      right: 20px;
      top: 2px;
    }

    .submit-button {
      @include fontStyle(1.7);
      position: fixed;
      height: 50px;
      width: 315px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid darkred;
      background-color: #C5CE73;
      border-radius: 10px;
      box-sizing: border-box;
      bottom: 80px;
    }
  }
</style>